<template>
    <el-form>
      <el-form-item>
        <img :src="attchAvatar(user.avatar)" class="user-img">
        <div class="avatar-upload"> 
            <span>{{ user.name }}</span>
            <el-button size="small" @click="dialogTableVisible = true">{{ "修改头像" }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="签名">
        <el-input v-model="user.message" type="textarea" ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select
      v-model="user.gender"
      size="middle"
      style="width: 240px"
    >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
        v-model="user.birth"
        type="date"
        placeholder="Pick a date"
        :default-value="new Date(2010, 9, 1)"
      />
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button @click="saveInfo">{{ "保存" }}</el-button>
      </el-form-item>
    </el-form>

    <el-dialog v-model="dialogTableVisible" title="上传头像" width="800">
        <el-upload
                class="upload-demo"
                drag
                :action="uploadUrl"
                name="avatar"
                :on-success="uploadAvatar"
                :show-file-list="false"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
                </div>
                <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
                </template>
            </el-upload>
    </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, ref, getCurrentInstance, onBeforeMount, reactive } from 'vue';
import { userInfo } from '@/stores/user';
import { HttpRequest } from '@/request/request';
import { UploadFilled } from '@element-plus/icons-vue'
import { ElLoading } from 'element-plus'

export default defineComponent({
    components:{
        UploadFilled
    },
    setup(){
        const proxy = getCurrentInstance()?.proxy;
        const uid = userInfo().uid;
        const user = reactive({
            name:"",
            avatar:"",
            gender:"",
            birth:new Date(),
            message:""
        })
        const dialogTableVisible = ref(false);
        const uploadUrl = ref("http://localhost:9999/galuser/user/avatarUpload/" + uid);
        const options = [
            {
                value: '保密',
                label: '保密',
            },
            {
                value: '男生',
                label: '男生',
            },
            {
                value: '女生',
                label: '女生',
            },
        ]

        onBeforeMount(()=>{
            getUserInfo();
        })

        async function getUserInfo() {
            if(uid == 0 || uid == null){
                (proxy as any).$message({
                message:"登录失效请刷新重新登录",
                type:"warning"
                })
                return;
            }
            const result = await HttpRequest.getUserInfo(uid) as responseBody;
            if(result.success){
                user.name = result.data.name;
                user.avatar = result.data.avatar == null ? 'src/assets/images/user_ava.png' : result.data.avatar;
                user.gender = result.data.gender == null ? "保密" : result.data.gender;
                user.birth = result.data.birthday;
                user.message = result.data.message;
            }
            else{
                (proxy as any).$message({
                message:result.msg,
                type:result.type
                })
            }
        }

        async function saveInfo() {
            if(user.name == ''){
                (proxy as any).$message({
                message:"用户名不能为空",
                type:"warning"
                })
                return;
            }
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            const result = await HttpRequest.saveUserInfo(uid,user.name,user.gender,user.birth,user.message) as responseBody;
            loading.close();
            (proxy as any).$message({
                message:result.msg,
                type:result.type
            })

        }

        async function uploadAvatar(response: responseBody) {
            (proxy as any).$message({
                message:response.msg,
                type:response.type
            })
            if(response.success){
                getUserInfo();
            }
        }
        return{
            user,
            saveInfo,
            options,
            dialogTableVisible,
            uploadAvatar,
            uploadUrl,
            attchAvatar:HttpRequest.attchAvatar
        }
    }
})

</script>

<style>
.avatar-upload{
    display: flex;
    margin-left: 20px;
    span{
        font-size: 20px;
        margin-right: 10px;
    }

}
.user-img{
    width: 60px;
    height: 60px;
    border-radius: 50%
}
</style>